<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/style/css/pc_base.css">
    <link rel="stylesheet" href="../dist/style/less/lib/swiper.min.css">

</head>

<body>

    <header class="hd">
        <div class="warp">
            <ul class="btn-list">
               <li class="item">
                    <a href="#" class="shop-car bg">
                        <!--<div class="num">1</div>-->
                        <i class="icon iconfont icon-icon"></i>
                    </a>
                </li>
                 <li  class="item">
                     <a href="./register.html">
                        <i class="iconfont icon-wode"></i>请登录
                    </a>
                    <!--<span href="#" class="bg">
                        <i class="icon iconfont icon-wode"></i>18200398881
                    </span>
                    <ul class="child-item">
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">收货地址</a></li>
                            <li><a href="#">绑定银行卡</a></li>
                            <li><a href="#">退出商场</a></li>
                        </ul>-->
                </li>
            </ul>
            <a href="./">
            <img src="../dist/images/logo.png" alt="" class="logo-img">
             <span class="span_txt">商城首页</span>
            </a>

        </div>
    </header>


    <div class="prod_details">
        <div class="warp">
            <div class="prod_banner">
                <div class="big-bar">
                    <div class="img-warp">
                        <!--<img src="" alt="">-->
                        <img src="../dist/images/prod1.jpg" alt="">
                    </div>

                </div>
                <div class="sm-bar">
                    <ul>
                        <li>
                            <div class="item active">
                                <a href="#">
                                    <img src="../dist/images/prod1.jpg" data-src="../dist/images/prod1.jpg">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a href="#">
                                    <img src="../dist/images/prod2.jpg" data-src="../dist/images/prod2.jpg">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a href="#">
                                    <img src="../dist/images/prod1.jpg" data-src="../dist/images/prod1.jpg">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a href="#">
                                    <img src="../dist/images/prod2.jpg" data-src="../dist/images/prod2.jpg">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <a href="#">
                                    <img src="../dist/images/prod1.jpg" data-src="../dist/images/prod1.jpg">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="prod_detail">
                <p class="name">血压仪</p>
                <p class="msg">每分钟脉搏/智能语音播报</p>
                <p class="price"> <span>¥</span>399</p>
                <p class="t_1"><i class="iconfont icon-lingchengben"></i>该商品享受购买6个月后全额返还</p>
                <div class="sku">
                    <span class="tit">颜色：</span>
                    <div class="sku-box">
                        <a class="item active" href="#">黄色</a>
                        <a class="item" href="#">蓝色</a>
                    </div>
                </div>
                <div class="num-js">
                    <span class="tit">数量：</span>
                    <a href="#" class="sub">
                        <i class="iconfont icon-jian"></i>
                    </a>
                    <input type="number" value="1" class="val_num" autocomplete="off">
                    <a href="#" class="add">
                        <i class="iconfont icon-jia"></i>
                    </a>
                </div>
                <div class="freight">
                    <span class="tit">运费：</span>
                    <span>包邮 <span>¥</span>0</span>
                </div>
                <div class="btn-bar">
                    <a class="addcart">加入购物车</a>
                    <a class="shop">立即购买</a>
                </div>
                <div class="legal">
                    <ul>
                        <li><i class="iconfont icon-ok"></i>零元购</li>
                        <li><i class="iconfont icon-ok"></i>正品保障</li>
                        <li><i class="iconfont icon-ok"></i>总部发货</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>


    <div class="tab_details_box">
        <div class="tab_tit">
            <div class="warp">
                <div class="tit-warp">
                    <a href="#1" class="active">商品详情</a>
                    <a href="#2">产品参数</a>
                </div>
            </div>
        </div>
        <div class="tab_cont">
            <div class="warp">
                <div class="tab_item active">
                    <img src="../dist/images/tmp2.jpg" alt="">
                </div>
                <div class="tab_item">
                    <p>222</p>
                    <img src="../dist/images/tmp2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <footer class="ft">
        <div class="warp">
            <!--<div class="logo-img">
                <img src="../dist/images/logo.png" alt="">
                <p>深圳市养悦源有限公司</p>
                <p>Copyright ©2015 fitcome.com</p>
            </div>-->
            <div class="gs-box">
                <script id="ebsgovicon" src="http://szcert.ebs.org.cn/govicon.js?id=8cd96afc-0ec2-4098-b28f-9ad7aeb714cc&width=42&height=58&type=1"
                    type="text/javascript" charset="utf-8"></script>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#"><span>■</span>在线支付</a></li>
                    <li><a href="#"><span>■</span>售后服务</a></li>
                    <li><a href="#"><span>■</span>第三方配送</a></li>
                    <li><a href="#"><span>■</span>联系我们</a></li>
                </ul>
            </div>
            <div class="qr-box">
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>下载健康云APP</p>
                        </div>
                    </div>
                </div>
                <div class="itme-qr">
                    <div class="line"></div>
                    <div class="qr-warp">
                        <div class="qr">
                            <div>
                                <img src="../dist/images/qr1.jpg" alt="">
                                <div class="topbg"></div>
                            </div>
                            <p>关注微信公众号</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>



    <div class="login-modal">
        <a href="#13" class="col-btn">
            <i class="icon iconfont icon-icon1"></i>
        </a>
        <div class="tit">
            <a href="#" class="active">账号登录</a>
            <a href="#">新用户注册</a>
            <div class="line"></div>
        </div>
        <div class="cont-box">
            <!--登录-->
            <div class="cont-item active">
                <div class="input-txt">
                    <i class="iconfont icon-shouji"></i>
                    <input type="text" placeholder="请输入手机号码">
                </div>
                <div class="input-txt">
                    <i class="iconfont icon-suo"></i>
                    <input type="password" placeholder="请输入6-12位密码">
                </div>
                <div class="form-ft">
                    <a href="#11" class="login-btn">登录</a>
                    <a href="./back_pwd.html" class="wjmm">忘记密码</a>
                </div>
            </div>
            <!--注册-->
            <div class="cont-item ">
                <div class="input-txt">
                    <i class="iconfont icon-shouji"></i>
                    <input type="text" placeholder="请输入手机号码">
                </div>
                <div class="yzm-box">
                    <div class="input-txt yzm">
                        <i class="iconfont icon-anquan"></i>
                        <input type="text" placeholder="请输入验证码">
                    </div>
                    <div class="input-txt yzm-btn">
                        <!--发送验证码-->
                        60s后重试
                    </div>
                </div>
                <div class="input-txt">
                    <i class="iconfont icon-suo"></i>
                    <input type="password" placeholder="请输入6-12位密码">
                </div>
                <div class="form-ft">
                    <a href="#11" class="login-btn">登录</a>
                    <a href="#111" class="xy">《使用条款和用户协议》</a>
                </div>
            </div>

        </div>
    </div>


    <script src="../dist/js/lib/jquery.min.js"></script>
    <script>
        $(function () {
            $(".sm-bar").on('mouseenter', '.item', function () {
                var $this = $(this);
                var imgSrc = $this.find('img').data('src');
                $this.parents('.sm-bar').find('.item').removeClass('active');
                $this.addClass('active')
                $('.big-bar').find('.img-warp img').attr('src', imgSrc);
            })

            $('.tab_tit').on('click', 'a', function () {
                var $this = $(this);
                $this.parents('.tab_tit').find('a').removeClass('active');
                $this.addClass('active');
                var $tab_item = $('.tab_cont').find('.tab_item');
                $tab_item.removeClass('active');
                $tab_item.eq($this.index()).addClass('active');
            })
            // $('.big-bar').find('.img-warp img').attr('src', $('.sm-bar').find('.active img').data('src'));

            $('.shop').on('click', function () {
                $('.login-modal').addClass('active');
            })
            $('.col-btn').on('click',function(){
                $('.login-modal').removeClass('active');
            })

            $(".login-modal").on('click', '.tit a', function () {
                var $this = $(this), $contItem = $('.cont-box').find('.cont-item');
                $this.parents('.tit').find('a').removeClass('active');
                $this.addClass('active');
                $contItem.removeClass('active');
                $contItem.eq($this.index()).addClass('active');

                checkLine($this.index())
            })
            function checkLine(index) {
                index = index || 0;
                $(".tit").find('.line').css("left", index * 50 + '%');
            }

            checkLine($(".tit").find('.active').index())


        })
    </script>

</body>

</html>
